<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
    :root {
        --bg-color: #0f172a;
        --text-color: #e2e8f0;
        --calendar-bg: rgba(15, 23, 42, 0.8);
        --black-stone: #475569;
        --red-stone: #ef4444;
        --highlight: #818cf8;
        --button-bg: #4f46e5;
        --button-hover: #6366f1;
        --glass-effect: rgba(255, 255, 255, 0.1);
    }

    html {
        width: 900px;
    }

    body {
        width: 100%;
        min-height: 100vh;
        background: var(--random-gradient);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-family: 'Arial', sans-serif;
        color: var(--text-color);
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        max-width: 900px;
        padding: 2rem 1rem;
        margin: 0 auto;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .title {
        font-size: 2.5rem;
        margin-bottom: 2rem;
        letter-spacing: 0.1em;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        position: relative;
        display: inline-block;
        padding: 0 1rem;
    }

    .title::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--highlight), transparent);
    }

    .calendar-container {
        background: var(--glass-effect);
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        padding: 20px;
        flex-grow: 1;
    }

    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .month-nav {
        display: flex;
        gap: 10px;
    }

    .month-nav button {
        background: linear-gradient(45deg, var(--button-bg), var(--highlight));
        padding: 0.5rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 500;
        color: var(--text-color);
        border: none;
        cursor: pointer;
    }

    .month-nav button:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    .current-month {
        font-size: 1.5em;
    }

    .weekdays,
    .calendar {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }

    .weekdays {
        margin-bottom: 0.5rem;
    }

    .weekday {
        color: #94a3b8;
        font-size: 0.9em;
        padding: 0.5rem 0;
        text-align: center;
        font-weight: bold;
    }

    .day {
        aspect-ratio: 1;
        padding: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background-color: var(--calendar-bg);
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .day:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        z-index: 2;
    }

    .day::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle, transparent 20%, var(--calendar-bg) 80%);
        transform: scale(2);
        opacity: 0;
    }

    .day:active::before {
        transform: scale(0);
        opacity: 1;
    }

    .black-stone {
        background-color: var(--black-stone);
    }

    .red-stone {
        background-color: var(--red-stone);
    }

    .other-month {
        opacity: 0.5;
    }

    .today {
        border: 2px solid var(--highlight);
        box-shadow: 0 0 12px rgba(129, 140, 248, 0.3);
    }

    .selected {
        background: rgba(129, 140, 248, 0.2) !important;
        border-color: var(--highlight);
    }

    .date {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .map,
    .location {
        font-size: 0.8em;
    }

    .detail-box {
        background: var(--glass-effect);
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        margin-top: 20px;
        padding: 15px;
    }

    .detail-box:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    }

    .detail-box h3 {
        color: var(--highlight);
        font-size: 1.25rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .map,
    .location {
        font-size: 0.8em;
    }

    footer {
        background-color: var(--calendar-bg);
        padding: 20px;
        text-align: center;
        margin-top: 20px;
    }

    .contact-info {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 10px;
    }

    .contact-info a {
        color: var(--text-color);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .contact-info a:hover {
        color: var(--highlight);
    }

    .ri-github-fill,
    .ri-mail-fill,
    .ri-qq-fill {
        font-size: 1.2em;
    }

    .counter {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 100px;
        height: auto;
        z-index: 1000;
    }

    /* 定义十种渐变色 */
    .gradient-1 {
        --random-gradient: linear-gradient(45deg, #ff9a9e, #fad0c4);
    }

    .gradient-2 {
        --random-gradient: linear-gradient(45deg, #a18cd1, #fbc2eb);
    }

    .gradient-3 {
        --random-gradient: linear-gradient(45deg, #fad0c4, #ffd1ff);
    }

    .gradient-4 {
        --random-gradient: linear-gradient(45deg, #ffecd2, #fcb69f);
    }

    .gradient-5 {
        --random-gradient: linear-gradient(45deg, #ff9a9e, #fecfef);
    }

    .gradient-6 {
        --random-gradient: linear-gradient(45deg, #f6d365, #fda085);
    }

    .gradient-7 {
        --random-gradient: linear-gradient(45deg, #fbc2eb, #a6c1ee);
    }

    .gradient-8 {
        --random-gradient: linear-gradient(45deg, #fdcbf1, #e6dee9);
    }

    .gradient-9 {
        --random-gradient: linear-gradient(45deg, #a1c4fd, #c2e9fb);
    }

    .gradient-10 {
        --random-gradient: linear-gradient(45deg, #d4fc79, #96e6a1);
    }

    #routeMap img {
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.5rem;
        background: rgba(0, 0, 0, 0.3);
    }

    .detail-box p {
        color: #2d3436;
        font-weight: bold;
    }
</style>

<body>
    <script>
        const gradients = [
            'gradient-1', 'gradient-2', 'gradient-3', 'gradient-4', 'gradient-5',
            'gradient-6', 'gradient-7', 'gradient-8', 'gradient-9', 'gradient-10'
        ];
        const randomGradient = gradients[Math.floor(Math.random() * gradients.length)];
        document.body.classList.add(randomGradient);
    </script>
    <div class="container">
        <h1 class="title">光遇碎石日历</h1>
        <div class="calendar-container">
            <div class="calendar-header">
                <div class="month-nav">
                    <button id="prevMonth">上个月</button>
                    <button id="nextMonth">下个月</button>
                </div>
                <div class="current-month" id="currentMonth"></div>
            </div>
            <div class="weekdays" id="weekdays"></div>
            <div class="calendar" id="calendar"></div>
            <div class="detail-box" id="detailBox"></div>
            <div class="detail-box" id="routeMap" style="text-align: center; margin-top: 20px;"></div>
        </div>
    </div>
    <footer>
        <div class="contact-info">
            <a href="https://github.com/Tloml-Starry" target="_blank"><i class="ri-github-fill"></i> GitHub</a>
            <a href="mailto:1947425850@qq.com"><i class="ri-mail-fill"></i> 联系我们</a>
            <a href="https://qm.qq.com/q/FtEkvOjEYM"><i class="ri-qq-fill"></i> QQ群: 1030599760</a>
        </div>
    </footer>

    <script>
        let year = "{{@year}}";
        let month = "{{@month}}";

        let currentDate = (() => {
            if (year === "undefined" || month === "undefined") {
                const now = new Date();
                year = now.getFullYear();
                month = now.getMonth();
                return now;
            }
            return new Date(year, month, 1);
        })();

        const maps = ['暮土', '禁阁', '云野', '雨林', '霞谷'];
        const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
        let selectedDate = new Date();

        const locations = {
            '云野': { 2: '蝴蝶平原', 3: '仙乡', 5: '云顶浮石', 6: '幽光山洞', 0: '圣岛' },
            '雨林': { 2: '荧光森林', 3: '密林遗迹', 5: '大树屋', 6: '雨林神殿', 0: '秘密花园' },
            '霞谷': { 2: '滑冰场', 3: '滑冰场', 5: '圆梦村', 6: '圆梦村', 0: '雪隐峰' },
            '暮土': { 2: '边陲荒漠', 3: '远古战场', 5: '黑水港湾', 6: '巨兽荒原', 0: '失落方舟' },
            '禁阁': { 2: '星光沙漠', 3: '星光沙漠', 5: '星光沙漠·一隅', 6: '星光沙漠·一隅', 0: '星光沙漠·一隅' },
        };

        function getMapLocation(map, dayOfWeek) {
            return locations[map]?.[dayOfWeek] || '';
        }

        const isSpecialDate = date => {
            const day = date.getDay();
            return date.getDate() <= 15 ? [2, 6, 0].includes(day) : [3, 5, 0].includes(day);
        };

        const getStoneType = date => {
            const day = date.getDay();
            return date.getDate() <= 15
                ? day === 2 ? '黑石' : [6, 0].includes(day) && '红石'
                : day === 3 ? '黑石' : [5, 0].includes(day) && '红石';
        };

        function getFallTimes(date) {
            const dayOfWeek = date.getDay();
            if (dayOfWeek === 0) return ['07:08', '13:08', '19:08'];

            const times = date.getDate() <= 15
                ? getStoneType(date) === '红石' ? ['10:08', '14:08', '22:08'] : ['09:08', '14:08', '19:08']
                : getStoneType(date) === '红石' ? ['11:08', '17:08', '23:08'] : ['09:08', '15:08', '21:08'];

            return times;
        }

        const createDayElement = (date, isCurrentMonth) => {
            const dayElement = document.createElement('div');
            dayElement.className = `day${isCurrentMonth ? '' : ' other-month'}${isSpecialDate(date) ? ` ${getStoneType(date).startsWith('黑') ? 'black' : 'red'}-stone` : ''}`;
            dayElement.dataset.date = date.toISOString();

            if (date.toDateString() === new Date().toDateString()) dayElement.classList.add('today');
            if (date.toDateString() === selectedDate.toDateString()) dayElement.classList.add('selected');

            dayElement.innerHTML = `<div class="date">${date.getDate()}</div>`;
            return dayElement;
        };

        function createCalendar(year = currentDate.getFullYear(), month = currentDate.getMonth()) {
            currentDate = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);

            document.getElementById('currentMonth').textContent = `${year}年${parseInt(month) + 1}月`;
            document.getElementById('weekdays').innerHTML = weekdays.map(day => `<div class="weekday">${day}</div>`).join('');
            const calendar = document.getElementById('calendar');
            calendar.innerHTML = '';

            for (let i = 0; i < new Date(year, month, 1).getDay(); i++) {
                calendar.appendChild(document.createElement('div'));
            }

            for (let i = 1; i <= lastDay.getDate(); i++) {
                const date = new Date(year, month, i);
                const dayElement = createDayElement(date, date.getMonth() === month);

                if (isSpecialDate(date)) {
                    dayElement.classList.add(getStoneType(date) === '黑石' ? 'black-stone' : 'red-stone');
                }

                if (date.toDateString() === new Date().toDateString()) {
                    dayElement.classList.add('today');
                }

                if (date.toDateString() === selectedDate.toDateString()) {
                    dayElement.classList.add('selected');
                }

                if (isSpecialDate(date)) {
                    const mapIndex = (i - 1) % maps.length;
                    const mapElement = document.createElement('div');
                    mapElement.className = 'map';
                    mapElement.textContent = maps[mapIndex];
                    dayElement.appendChild(mapElement);

                    const locationElement = document.createElement('div');
                    locationElement.className = 'location';
                    locationElement.textContent = getMapLocation(maps[mapIndex], date.getDay());
                    dayElement.appendChild(locationElement);
                }

                dayElement.addEventListener('click', handleDateClick);
                calendar.appendChild(dayElement);
            }
        }

        function handleDateClick(event) {
            selectedDate = new Date(event.currentTarget.dataset.date);
            document.querySelectorAll('.day').forEach(day => day.classList.remove('selected'));
            event.currentTarget.classList.add('selected');
            updateDetailBox();
        }

        function updateDetailBox() {
            const detailBox = document.getElementById('detailBox');
            const routeMap = document.getElementById('routeMap');
            const isSpecial = isSpecialDate(selectedDate);
            const stoneType = getStoneType(selectedDate);
            const dayOfWeek = selectedDate.getDay();
            const mapIndex = (selectedDate.getDate() - 1) % maps.length;
            const map = maps[mapIndex];
            const location = getMapLocation(map, dayOfWeek);

            if (!isSpecial) {
                detailBox.innerHTML = '<p>今日无碎石</p>';
                routeMap.innerHTML = '';
                return;
            }

            const now = new Date();
            const isPastDate = selectedDate < now && selectedDate.toDateString() !== now.toDateString();

            detailBox.innerHTML = `
                <h3>${selectedDate.getFullYear()}年${selectedDate.getMonth() + 1}月${selectedDate.getDate()}日</h3>
                <p>碎石类型：${stoneType}</p>
                <p>地图：${map}</p>
                ${location ? `<p>坠落位置：${location}</p>` : ''}
                <p>坠落时间：${getFallTimes(selectedDate).join(', ')}</p>
                ${isPastDate ? '<p>坠落已结束</p>' : '<p id="countdown"></p>'}
            `;

            if (location) {
                routeMap.innerHTML = `
                    <h4 style="font-size: 1.5em;">路线图</h4>
                    <img src="https://ghfast.top/https://raw.githubusercontent.com/A-Kevin1217/resources/master/resources/img/%E5%85%89%E9%81%87/ShardRouteMap/${location}.jpg" alt="路线图" style="width: 100%; max-width: 800px; height: auto; display: block; margin: 0 auto;" />
                `;
            } else {
                routeMap.innerHTML = '';
            }

            if (!isPastDate) {
                updateCountdown();
            }
        }

        const updateCountdown = () => {
            const countdownElement = document.getElementById('countdown');
            if (!countdownElement) return;

            const now = new Date();
            const nextFallTime = getFallTimes(selectedDate)
                .map(t => new Date(selectedDate).setHours(...t.split(':')))
                .find(t => t > now) || new Date(selectedDate).setDate(selectedDate.getDate() + 1, ...getFallTimes(selectedDate)[0].split(':'));

            const update = () => {
                const diff = nextFallTime - Date.now();
                countdownElement.textContent = diff < 0 ? '坠落已结束' :
                    `距离下次坠落：${[Math.floor(diff / 3.6e6), Math.floor(diff % 3.6e6 / 6e4), Math.floor(diff % 6e4 / 1e3)]
                        .map(n => n.toString().padStart(2, '0')).join(':')}`;
            };

            update();
            setInterval(update, 1000);
        };

        function changeMonth(delta) {
            currentDate.setMonth(currentDate.getMonth() + delta);
            createCalendar(currentDate.getFullYear(), currentDate.getMonth());
            updateDetailBox();
        }

        document.getElementById('prevMonth').addEventListener('click', () => changeMonth(-1));
        document.getElementById('nextMonth').addEventListener('click', () => changeMonth(1));

        createCalendar(year, month);
        updateDetailBox();

        setInterval(() => {
            const now = new Date();
            if (now.getHours() === 0 && now.getMinutes() === 0 && now.getSeconds() === 0) {
                createCalendar();
                updateDetailBox();
            }
        }, 1000);
    </script>
</body>